<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Editor | Design Blogger Templates and Widgets</title>
<meta content='Learn How to Design Blogger Templates and Create Blogger Widgets Using this HTML Editor.' name='description'/>
<meta content='Design Blogger Templates, Design Blogger Widgets, Create Widgets, CSS, HTML, Javascript' name='keywords'/>
<script type='text/javascript' src='scripts/editor.js'></script>
<link href='http://lh4.ggpht.com/_7wsQzULWIwo/SvZu8ooXoQI/AAAAAAAACJk/78jXTrMVkM8/s800/MBT-favicon.gif' rel='icon' type='image/gif'/>

<script type="text/javascript">
   
////////////////////////////////////////////////////////////////////
// Setting

var rate = 20;  // Increase amount(The degree of the transmutation)


////////////////////////////////////////////////////////////////////
// Main routine

if (document.getElementById)
window.onerror=new Function("return true")

var objActive;  // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID


if (document.all) {
    document.onmouseover = doRainbowAnchor;
    document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
    document.onmouseover = Mozilla_doRainbowAnchor;
    document.onmouseout = Mozilla_stopRainbowAnchor;
}


//=============================================================================
// doRainbow
//  This function begins to change a color.
//=============================================================================
function doRainbow(obj)
{
    if (act == 0) {
        act = 1;
        if (obj)
            objActive = obj;
        else
            objActive = event.srcElement;
        clrOrg = objActive.style.color;
        TimerID = setInterval("ChangeColor()",100);
    }
}


//=============================================================================
// stopRainbow
//  This function stops to change a color.
//=============================================================================
function stopRainbow()
{
    if (act) {
        objActive.style.color = clrOrg;
        clearInterval(TimerID);
        act = 0;
    }
}


//=============================================================================
// doRainbowAnchor
//  This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function doRainbowAnchor()
{
    if (act == 0) {
        var obj = event.srcElement;
        while (obj.tagName != 'A' && obj.tagName != 'BODY') {
            obj = obj.parentElement;
            if (obj.tagName == 'A' || obj.tagName == 'BODY')
                break;
        }

        if (obj.tagName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = objActive.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}


//=============================================================================
// stopRainbowAnchor
//  This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function stopRainbowAnchor()
{
    if (act) {
        if (objActive.tagName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}


//=============================================================================
// Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser)
//  This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_doRainbowAnchor(e)
{
    if (act == 0) {
        obj = e.target;
        while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
            obj = obj.parentNode;
            if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
                break;
        }

        if (obj.nodeName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = obj.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}


//=============================================================================
// Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser)
//  This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_stopRainbowAnchor(e)
{
    if (act) {
        if (objActive.nodeName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}


//=============================================================================
// Change Color
//  This function changes a color actually.
//=============================================================================
function ChangeColor()
{
    objActive.style.color = makeColor();
}


//=============================================================================
// makeColor
//  This function makes rainbow colors.
//=============================================================================
function makeColor()
{
    // Don't you think Color Gamut to look like Rainbow?

    // HSVtoRGB
    if (elmS == 0) {
        elmR = elmV;    elmG = elmV;    elmB = elmV;
    }
    else {
        t1 = elmV;
        t2 = (255 - elmS) * elmV / 255;
        t3 = elmH % 60;
        t3 = (t1 - t2) * t3 / 60;

        if (elmH < 60) {
            elmR = t1;  elmB = t2;  elmG = t2 + t3;
        }
        else if (elmH < 120) {
            elmG = t1;  elmB = t2;  elmR = t1 - t3;
        }
        else if (elmH < 180) {
            elmG = t1;  elmR = t2;  elmB = t2 + t3;
        }
        else if (elmH < 240) {
            elmB = t1;  elmR = t2;  elmG = t1 - t3;
        }
        else if (elmH < 300) {
            elmB = t1;  elmG = t2;  elmR = t2 + t3;
        }
        else if (elmH < 360) {
            elmR = t1;  elmG = t2;  elmB = t1 - t3;
        }
        else {
            elmR = 0;   elmG = 0;   elmB = 0;
        }
    }

    elmR = Math.floor(elmR).toString(16);
    elmG = Math.floor(elmG).toString(16);
    elmB = Math.floor(elmB).toString(16);
    if (elmR.length == 1)    elmR = "0" + elmR;
    if (elmG.length == 1)    elmG = "0" + elmG;
    if (elmB.length == 1)    elmB = "0" + elmB;

    elmH = elmH + rate;
    if (elmH >= 360)
        elmH = 0;

    return '#' + elmR + elmG + elmB;
}
</script>
<style type="text/css">

body{width:1007px;margin:0 auto;margin:0;padding:0;background:rgba(0,0,0,.05);font-family: Georgia, "Times New Roman", Times, serif;font-size:13px;}
.codebox{
 margin:0px;
 color:#222;
 font-size:12px;
 font-weight:400;
 border:double 5px #666;
 padding: 5px;
 min-width:200px;
 width:400px;
 max-width:400px;
 height:500px;
 overflow:auto;
 margin-left:5px;
}
.GRpreview{
 height:580px;
 width:500px;
 resize:both;
 border:double 5px #666;
 padding:5px;
}

header{display:block;width:100%;height:60px;background:rgba(0,0,0,.8);margin:0;}
table td.yourprev,table td.yourprev iframe{-moz-transition:2s;}
table td.yourprev:hover{position:absolute;left:0;top:60px;width:1000px;z-index:200;border:none;-moz-transition:2s;}
table td.yourprev:hover iframe{width:1000px;z-index:200;-moz-transition:2s;}

</style>

</head>
<body>
<header>
<div style="width:400px;margin-top:20px;padding:0 10px;float:left;">
<button onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">Edit Code and Click to Preview</button>
<button onclick="window.document.form2.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">
Clear </button>
</div>
</header>
<table style="width:100%;background:rgba(0,0,0,.1);">
<tr> 
<td valign="top">
&lt;!DOCTYPE html&gt;<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;style type="text/css"&gt; &lt/style&gt;
<form name="form2" method="post">
<textarea class="codebox" name="code" onClick="focus(this.code)">
<!DOCTYPE html>
<html b:version='2' class='v2' dir='ltr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<meta content='width=1100' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<script type="text/javascript">(function() { var a=window,c="jstiming",d="tick";var e=function(b){this.t={};this.tick=function(b,o,f){f=void 0!=f?f:(new Date).getTime();this.t[b]=[f,o]};this[d]("start",null,b)},h=new e;a.jstiming={Timer:e,load:h};if(a.performance&&a.performance.timing){var i=a.performance.timing,j=a[c].load,k=i.navigationStart,l=i.responseStart;0<k&&l>=k&&(j[d]("_wtsrt",void 0,k),j[d]("wtsrt_","_wtsrt",l))}
try{var m=null;a.chrome&&a.chrome.csi&&(m=Math.floor(a.chrome.csi().pageT));null==m&&a.gtbExternal&&(m=a.gtbExternal.pageT());null==m&&a.external&&(m=a.external.pageT);m&&(a[c].pt=m)}catch(n){};a.tickAboveFold=function(b){var g=0;if(b.offsetParent){do g+=b.offsetTop;while(b=b.offsetParent)}b=g;750>=b&&a[c].load[d]("aft")};var p=!1;function q(){p||(p=!0,a[c].load[d]("firstScrollTime"))}a.addEventListener?a.addEventListener("scroll",q,!1):a.attachEvent("onscroll",q);
 })();</script>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link href='http://bestbloggermenus.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://bestbloggermenus.blogspot.com/2012/07/css-reset-blogger-tabs.html' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="Best Blogger Menus - Atom" href="http://bestbloggermenus.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Best Blogger Menus - RSS" href="http://bestbloggermenus.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Best Blogger Menus - Atom" href="http://www.blogger.com/feeds/8408920854530461440/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=8408920854530461440" />
<link rel="alternate" type="application/atom+xml" title="Best Blogger Menus - Atom" href="http://bestbloggermenus.blogspot.com/feeds/7314069642200423040/comments/default" />
<!--[if IE]><script type="text/javascript" src="http://www.blogger.com/static/v1/jsbin/968765673-ieretrofit.js"></script>
<![endif]-->
<link rel="image_src" href="http://2.bp.blogspot.com/-G7Qro2IwQss/UBQAcpcthTI/AAAAAAAAABs/6u75BdA1rZA/s72-c/blogger-tabs.jpg" />
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
<title>Best Blogger Menus: CSS Reset Blogger Tabs</title>
<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/209053924-widget_css_2_bundle.css' />
<link type="text/css" rel="stylesheet" href="http://www.blogger.com/dyn-css/authorization.css?targetBlogID=8408920854530461440&zx=4e47a7a7-f7b2-403f-b8ed-fca8c11cf3a5"/>
<style type="text/css">
#navbar-iframe { display:block }
</style>
<style id='page-skin-1' type='text/css'><!--
body {
font: normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #222222;
background: #66bbdd none repeat scroll top left;
padding: 0 40px 40px 40px;
}
html body .region-inner {
min-width: 0;
max-width: 100%;
width: auto;
}
a:link {
text-decoration:none;
color: #2288bb;
}
a:visited {
text-decoration:none;
color: #888888;
}
a:hover {
text-decoration:underline;
color: #33aaff;
}
.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent url(http://www.blogblog.com/1kt/simple/body_gradient_tile_light.png) repeat scroll top left;
_background-image: none;
}
.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: #66bbdd none repeat scroll top left;
}
.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent url(http://www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll top left;
_background-image: none;
}
.content-outer {
-moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 10px #333333;
box-shadow: 0 0 40px rgba(0, 0, 0, .15);
margin-bottom: 1px;
}
.content-inner {padding: 10px 10px;}
.content-inner {
padding: 10px 10px;
}
.content-inner {
background-color: #ffffff;
}
.content-inner {padding: 10px 60px;}
/* Header
----------------------------------------------- */
.header-outer {
background: transparent none repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1{
font: normal bold 60px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
color: #900;
text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);
text-align:right;
text-shadow:-2px -2px 3px rgba(0,0,0,.2),5px 5px 6px rgba(0,0,0,.7);
}
.Header h1 a {
color: rgba(0,0,0,0.8);
}
.Header .description {
font-size: 140%;
color: #777777;
}
.header-inner .Header .titlewrapper {
padding: 22px 30px;
}
.header-inner .Header .descriptionwrapper {
padding: 0 30px;
}
/* Tabs
----------------------------------------------- */
/* reseter tabs  .widget */
.tabs .widget ul {list-style:none; overflow:inherit;}
.tabs .widget ul,.tabs .widget li,.tabs .widget li a{margin:0;padding:0;}
.tabs .section:first-child ul,.tabs .widget ul,.tabs .widget li,.tabs .widget li.selectrd,.tabs .widget li.selected a,.tabs .widget li a,.tabs .widget li:first-child a {border-radius:0;background:none;border:none;}
.tabs .widget li a:hover{background:none;}
/* reseter tabs */
.tabs-inner .section:first-child {
border-top: 1px solid #eeeeee;
}
.tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 1px solid #eeeeee;
border-left: 0 solid #eeeeee;
border-right: 0 solid #eeeeee;
}
.tabs-inner .widget ul {
background: #f5f5f5 url(http://www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;
background: #f5f5f5 url(http://www.blogblog.com/1kt/simple/gradients_light.png)  bottom left repeat-x;
_background-image: none;
border-bottom: 1px solid #eeeeee;
margin-top: 0;
margin-left: -30px;
margin-right: -30px;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #999999;
border-left: 1px solid #ffffff;
border-right: 1px solid #eeeeee;
}
.tabs-inner .widget li:first-child a {
border-left: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #000000;
background-color: #eeeeee;
text-decoration: none;
}
/* reseter tabs */
.tabs .widget ul {margin:0;padding-bottom:32px;}
/* reseter tabs */
/* Columns
----------------------------------------------- */
.main-outer {
border-top: 0 solid #eeeeee;
}
.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: 1px solid #eeeeee;
}
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid #eeeeee;
}
/* Headings
----------------------------------------------- */
h2 {
margin: 0 0 1em 0;
font: normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #000000;
text-transform: uppercase;
}
/* Widgets
----------------------------------------------- */
.widget .zippy {
color: #999999;
text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}
.widget .popular-posts ul {
list-style: none;
}
/* Posts
----------------------------------------------- */
.date-header span {
background-color: transparent;
color: #222222;
padding: inherit;
letter-spacing: inherit;
margin: inherit;
}
.main-inner {
padding-top: 30px;
padding-bottom: 30px;
}
.main-inner {border-top:10px solid rgba(0,0,0,.4);}
.main-inner .column-center-inner {
padding: 0 15px;
}
.main-inner .column-center-inner .section {
margin: 0 15px;
}
.post {
margin: 0 0 25px 0;
}
h3.post-title, .comments h4 {
font: normal normal 36px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
margin: .75em 0 0;
}
h3.post-title{
text-align:center;
display:block;
border-bottom:3px double rgba(0,0,0,.4);
}
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 2px;
background: #ffffff;
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post-body img, .post-body .tr-caption-container {
padding: 5px;
}
.post-body .tr-caption-container {
color: #222222;
}
.post-body .tr-caption-container img {
padding: 0;
background: transparent;
border: none;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
.post-header {
margin: 0 0 1.5em;
line-height: 1.6;
font-size: 90%;
}
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
color: #666666;
background-color: #f9f9f9;
border-bottom: 1px solid #eeeeee;
line-height: 1.6;
font-size: 90%;
}
#comments .comment-author {
padding-top: 1.5em;
border-top: 1px solid #eeeeee;
background-position: 0 1.5em;
}
#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}
.avatar-image-container {
margin: .2em 0 0;
}
#comments .avatar-image-container img {
border: 1px solid #eeeeee;
}
.post-body{font-size:120%;}fl,.post-body .fl{float:left;}fr,.post-body .fr{float:right;}fn,fc,.post-body .fc{float:none;}buka,opening{position:relative;display:block;text-align:justify;}tal,.tal,li .tal,{text-align:left;}tar,.post-body .tar{text-align:right;}tac,.post-body .tac{text-align:center;}taj,.post-body .taj{text-align:justify;}fl img,fl a img,.post-body img.fl{margin:0 15px 6px 0;}fr img,fr a img,.post-body img.fr{margin:0 0 6px 15px;}fc img,fc a img,.post-body img.fc{display:block;text-align:center;margin:15px auto;}.post-body img,.post-body a img{padding:8px;box-shadow:0 0 6px #666;border:1px solid rgba(0,0,0,.05;border-radius:4px;}
/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url();
}
.comments .comments-content .loadmore a {
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
}
.comments .comment-thread.inline-thread {
background-color: #f9f9f9;
}
.comments .continue {
border-top: 2px solid #999999;
}
/* Accents
---------------------------------------------- */
.section-columns td.columns-cell {
border-left: 1px solid #eeeeee;
}
.blog-pager {
background: transparent none no-repeat scroll top center;
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: #ffffff;
padding: 5px;
}
.footer-outer {
border-top: 0 dashed #bbbbbb;
}
/* Mobile
----------------------------------------------- */
body.mobile  {
background-size: auto;
}
.mobile .body-fauxcolumn-outer {
background: transparent none repeat scroll top left;
}
.mobile .body-fauxcolumn-outer .cap-top {
background-size: 100% auto;
}
.mobile .content-outer {
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
padding: 0 40px;
}
body.mobile .AdSense {
margin: 0 -40px;
}
.mobile .tabs-inner .widget ul {
margin-left: 0;
margin-right: 0;
}
.mobile .post {
margin: 0;
}
.mobile .main-inner .column-center-inner .section {
margin: 0;
}
.mobile .date-header span {
padding: 0.1em 10px;
margin: 0 -10px;
}
.mobile h3.post-title {
margin: 0;
}
.mobile .blog-pager {
background: transparent none no-repeat scroll top center;
}
.mobile .footer-outer {
border-top: none;
}
.mobile .main-inner, .mobile .footer-inner {
background-color: #ffffff;
}
.mobile-index-contents {
color: #222222;
}
.mobile-link-button {
background-color: #2288bb;
}
.mobile-link-button a:link, .mobile-link-button a:visited {
color: #ffffff;
}
.mobile .tabs-inner .section:first-child {
border-top: none;
}
.mobile .tabs-inner .PageList .widget-content {
background-color: #eeeeee;
color: #000000;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
}
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-left: 1px solid #eeeeee;
}

--></style>
<style id='template-skin-1' type='text/css'><!--
body {
min-width: 900px;
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 900px;
max-width: 900px;
_width: 900px;
}
.main-inner .columns {
padding-left: 0px;
padding-right: 0px;
}
.main-inner .fauxcolumn-center-outer {
left: 0px;
right: 0px;
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("0px") -
parseInt("0px") + 'px');
}
.main-inner .fauxcolumn-left-outer {
width: 0px;
}
.main-inner .fauxcolumn-right-outer {
width: 0px;
}
.main-inner .column-left-outer {
width: 0px;
right: 100%;
margin-left: -0px;
}
.main-inner .column-right-outer {
width: 0px;
margin-right: -0px;
}
#layout {
min-width: 0;
}
#layout .content-outer {
min-width: 0;
width: 800px;
}
#layout .region-inner {
min-width: 0;
width: auto;
}
.navbar{display:none;}
body{margin-top:10px;}
#comments.comments,.comment-form{display:block;margin:20px auto;text-align:center;}
--></style>
<style>pre{display:block;position:relative;padding:20px;overflow:auto;max-height:450px;line-height:24px;font-family:Courier New, Courier;color:rgba(0,0,0,.6);background:rgba(0,0,0,.1);margin:25px 0;white-space:pre;border:2px solid rgba(0,0,0,.4);border-left:11px double rgba(0,0,0,.3);}pre span{color:rgba(0,0,0,.3);}bb{display:block;height:20px;width:100%;}.post-body h1{font-size:27px;}.post-body h2{font-size:24px;}.post-body h3{font-size:22px;}.post-body h4{font-size:24px;display:block;border-bottom:1px dotted #555;}.post-body h5{font-size:20px;margin:10px 0;padding:0;}.post-body h6{font-size:14px;margin:10px 0;padding:0;}.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5{letter-spacing:-1px;font-weight:bold;font-family:Times New Roman;}buka a,opening a{font-weight:bold;text-shadow:0 1px 1px #aaa;padding:0 4px;}.post-body{position:relative;}fs12,.post-body .fs12{font-size:12px;}fs14,.post-body .fs14{font-size:14px;}fs16,.post-body .fs16{font-size:16px;}fs18,.post-body .fs18{font-size:18px;}fs20,.post-body .fs20{font-size:20px;}fs22,.post-body .fs22{font-size:22px;}fs24,.post-body .fs24{font-size:24px;}gn{color:green;}rd{color:red;}be{color:blue;}yw{color:yellow;}le{color:lime;}ma{color:magenta;}bk{color:black;}bn{color:brown;}lg{color:lightgreen;}lb{color:lightblue;}ly{color:lightyellow;}oe{color:orange;}</style>
<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script></head>
<body class='loading'>
<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=8408920854530461440&amp;blogName=Best+Blogger+Menus&amp;publishMode=PUBLISH_MODE_BLOGSPOT&amp;navbarType=LIGHT&amp;layoutType=LAYOUTS&amp;searchRoot=http://bestbloggermenus.blogspot.com/search&amp;blogLocale=in&amp;v=1&amp;homepageUrl=http://bestbloggermenus.blogspot.com/&amp;targetPostID=7314069642200423040&amp;vt=53189087161666550" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" allowtransparency="true" title="Navigasi dan Penelusuran Blogger"></iframe>
<div></div><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</div></div>
<div class='body-fauxcolumns'>
<div class='fauxcolumn-outer body-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'></div>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</div>
<div class='content'>
<div class='content-fauxcolumns'>
<div class='fauxcolumn-outer content-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'></div>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</div>
<div class='content-outer'>
<div class='content-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left content-fauxborder-left'>
<div class='fauxborder-right content-fauxborder-right'></div>
<div class='content-inner'>
<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'></div>
<div class='region-inner header-inner'>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<a href='http://bestbloggermenus.blogspot.com/'>Best Blogger Menus</a>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span>
</span></p>
</div>
</div>
</div></div>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</header>
<div class='tabs-outer'>
<div class='tabs-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left tabs-fauxborder-left'>
<div class='fauxborder-right tabs-fauxborder-right'></div>
<div class='region-inner tabs-inner'>
<div class='tabs section' id='crosscol3'></div>
</div>
</div>
<div class='tabs-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
<div class='main-outer'>
<div class='main-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left main-fauxborder-left'>
<div class='fauxborder-right main-fauxborder-right'></div>
<div class='region-inner main-inner'>
<div class='columns fauxcolumns'>
<div class='fauxcolumn-outer fauxcolumn-center-outer'>
<div class='cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'></div>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
<div class='fauxcolumn-outer fauxcolumn-left-outer'>
<div class='cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'></div>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
<div class='fauxcolumn-outer fauxcolumn-right-outer'>
<div class='cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left'>
<div class='fauxborder-right'></div>
<div class='fauxcolumn-inner'>
</div>
</div>
<div class='cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
<!-- corrects IE6 width calculation -->
<div class='columns-inner'>
<div class='column-center-outer'>
<div class='column-center-inner'>
<div class='main section' id='main'><div class='widget Blog' id='Blog1'>
<div class='blog-posts hfeed'>
<!-- google_ad_section_start(name=default) -->

          <div class="date-outer">
        
<h2 class='date-header'><span>Sabtu, 28 Juli 2012</span></h2>

          <div class="date-posts">
        
<div class='post-outer'>
<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<a name='7314069642200423040'></a>
<h3 class='post-title entry-title' itemprop='name'>
CSS Reset Blogger Tabs
</h3>
<div class='post-header'>
<div class='post-header-line-1'></div>
</div>
<div class='post-body entry-content' id='post-body-7314069642200423040' itemprop='articleBody'>
<fc><a href="http://bestbloggerhack.blogspot.com/" target="_blank"><img height="51" width="459" src="http://2.bp.blogspot.com/-G7Qro2IwQss/UBQAcpcthTI/AAAAAAAAABs/6u75BdA1rZA/blogger-tabs.jpg" /></a></fc><br />
<buka>Blogger memang telah menyedialan sebuah fitur yang memungkinkan penggunanya untuk membuat sebuah tabs horizontal dan vertical. Tab hoizontal akan terpasang di bawah header blog atau di atas post title. Sayangnya kode yang digunakan untuk tabs blogger (navigasi menu) menciptakan sedikit problema baru bagi penggunanya. Banyak masalah bermunculan saat pengguna mencoba untuk membuat menu horizontal baru dengan kode yang dibuat sendiri akibat kurang puas dengan tampilan tabs horizontal default blogger. Disamping banyak variable yang tak diharapkan muncul di tabs/menu yang kita buat, seperti background dan border, namun jika kita sedikit lebih cermat maka akan merasakan betapa sebuah horizontal drop menu atau horizontal dropdown menu tak dapat dibuat karena anak menu atau anak-anak menu yang seharusnya meluncur ke bawah tiba-tiba terlihat terpotong tanpa sanggup melewati post title. Sungguh situasi yang sangat tidak mengenakkan dan sering membuat pengguna putus asa. Bahkan...<a name='more'></a>, banyak blogger yang akhirnya memilih menggunakan template hasil download atau template lama blogger hanya sekedar agar bisa menggunakan horizontal dropdown menu. Sebuah kebijakan yang menurut saya sangat salah karena menggunakan kode yang bersifat sangat "eksklusif" sehingga menyulitkan pengguna untuk membangun blog dan melengkapi blog dengan berbagai fasilitas baru untuk mempermudah pembaca mengakses seluruh bagian blog.<br />
<br />
CSS Reset untuk tabs blogger dimaksudkan untuk menetralisir permasalahan yang muncul ketika blogger hendak membuat sebuah menu horizontal dengan kode baru yang dibuat sendiri. Kode css ini bisa disimpan di bawah kode css tabs default blogger atau bisa juga disimpan di atas kode <rd>]]&gt;&lt;/b:skin&gt;</rd>. Jika kemudian anda bermaksud membuat menu dengan kode css hasil buatan sendiri atau hasil copy dari berbagai tutorial blogger yang banyak ditemukan, silahkan kode css menu baru disimpan di bawah kode css reset.<br />
<br />
<h4>Kode css Reset</h4><br />
<pre><span>/* css reset blogger tabs  */</span>

<b>.tabs .widget ul,.tabs .widget li,.tabs .widget li a</b>{
      margin:0;
      padding:0;
      }
<b>.tabs .section:first-child ul,.tabs .widget ul,.tabs .widget li,.tabs .widget li.selectrd,.tabs .widget li.selected a,.tabs .widget li a,.tabs .widget li:first-child a</b>{
      border-radius:0;
      background:none;
      border:none;
      }
<b>.tabs .widget li a:hover</b>{
      background:none;
      }
<b>.tabs .widget ul</b>{
      list-style:none;
      overflow:visible;
      min-height:32px;
      } <span>/* min-height untuk memunculkan background ul */</span>
<span>/* css reset blogger tabs  */</span>
<bb></bb></pre></buka>
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
Diposkan oleh
<span class='fn'>
<a href='http://www.blogger.com/profile/15605262488816486839' itemprop='author' rel='author' title='author profile'>
gubhugreyot
</a>
</span>
</span>
<span class='post-timestamp'>
di
<a class='timestamp-link' href='http://bestbloggermenus.blogspot.com/2012/07/css-reset-blogger-tabs.html' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2012-07-28T08:12:00-07:00'>08:12</abbr></a>
</span>
<span class='post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-2109987535'>
<a href='http://www.blogger.com/post-edit.g?blogID=8408920854530461440&postID=7314069642200423040&from=pencil' title='Edit Entri'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' href='http://www.blogger.com/share-post.g?blogID=8408920854530461440&postID=7314069642200423040&target=email' target='_blank' title='Kirimkan Ini lewat Email'><span class='share-button-link-text'>Kirimkan Ini lewat Email</span></a><a class='goog-inline-block share-button sb-blog' href='http://www.blogger.com/share-post.g?blogID=8408920854530461440&postID=7314069642200423040&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='goog-inline-block share-button sb-twitter' href='http://www.blogger.com/share-post.g?blogID=8408920854530461440&postID=7314069642200423040&target=twitter' target='_blank' title='Berbagi ke Twitter'><span class='share-button-link-text'>Berbagi ke Twitter</span></a><a class='goog-inline-block share-button sb-facebook' href='http://www.blogger.com/share-post.g?blogID=8408920854530461440&postID=7314069642200423040&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Berbagi ke Facebook'><span class='share-button-link-text'>Berbagi ke Facebook</span></a><div class='goog-inline-block dummy-container'><g:plusone source='blogger' href='http://bestbloggermenus.blogspot.com/2012/07/css-reset-blogger-tabs.html' size='medium' width='300' annotation='inline'/></div>
</div>
</div>
<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
Label:
<a href='http://bestbloggermenus.blogspot.com/search/label/blogger%20hack' rel='tag'>blogger hack</a>,
<a href='http://bestbloggermenus.blogspot.com/search/label/css%20code' rel='tag'>css code</a>,
<a href='http://bestbloggermenus.blogspot.com/search/label/Horizontal%20Tab%20menu' rel='tag'>Horizontal Tab menu</a>,
<a href='http://bestbloggermenus.blogspot.com/search/label/Menu' rel='tag'>Menu</a>,
<a href='http://bestbloggermenus.blogspot.com/search/label/Navigation%20Menu' rel='tag'>Navigation Menu</a>
</span>
</div>
<div class='post-footer-line post-footer-line-3'><span class='post-location'>
</span>
</div>
</div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
<h4>Tidak ada komentar:</h4>
<div id='Blog1_comments-block-wrapper'>

<dl class='avatar-comment-indent' id='comments-block'>
</dl>
</div>
<p class='comment-footer'>
<div class='comment-form'>
<a name='comment-form'></a>
<h4 id='comment-post-message'>Poskan Komentar</h4>
<p>
</p>
<a href='http://www.blogger.com/comment-iframe.g?blogID=8408920854530461440&postID=7314069642200423040' id='comment-editor-src'></a>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>
<script type="text/javascript" src="http://www.blogger.com/static/v1/jsbin/3595521450-comment_from_post_iframe.js"></script>
<script type='text/javascript'>
      BLOG_CMT_createIframe('http://www.blogger.com/rpc_relay.html', '10540772288050734330');
    </script>
</div>
</p>
<div id='backlinks-container'>
<div id='Blog1_backlinks-container'>
</div>
</div>
</div>
</div>

        </div></div>
      
<!-- google_ad_section_end -->
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='http://bestbloggermenus.blogspot.com/2012/07/blogger-horizontal-tab-menu.html' id='Blog1_blog-pager-older-link' title='Posting Lama'>Posting Lama</a>
</span>
<a class='home-link' href='http://bestbloggermenus.blogspot.com/'>Beranda</a>
</div>
<div class='clear'></div>
<div class='post-feeds'>
<div class='feed-links'>
Langganan:
<a class='feed-link' href='http://bestbloggermenus.blogspot.com/feeds/7314069642200423040/comments/default' target='_blank' type='application/atom+xml'>Poskan Komentar (Atom)</a>
</div>
</div>
<script type="text/javascript">window.___gcfg = {'lang': 'in'};window.___gapisync = false;(function() {var po = document.createElement('script');po.type = 'text/javascript';po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.body.getElementsByTagName('script')[0];s.parentNode.insertBefore(po, s);})();</script>
</div></div>
</div>
</div>
<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
</aside>
</div>
</div>
<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
</aside>
</div>
</div>
</div>
<div style='clear: both'></div>
<!-- columns -->
</div>
<!-- main -->
</div>
</div>
<div class='main-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'></div>
<div class='region-inner footer-inner'>
<div class='foot section' id='footer-1'><div class='widget BlogArchive' id='BlogArchive1'>
<h2>Arsip Blog</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>&#9660;&#160;</span>
</a>
<a class='post-count-link' href='http://bestbloggermenus.blogspot.com/search?updated-min=2012-01-01T00:00:00-08:00&amp;updated-max=2013-01-01T00:00:00-08:00&amp;max-results=2'>2012</a>
<span class='post-count' dir='ltr'>(2)</span>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>&#9660;&#160;</span>
</a>
<a class='post-count-link' href='http://bestbloggermenus.blogspot.com/2012_07_01_archive.html'>Juli</a>
<span class='post-count' dir='ltr'>(2)</span>
<ul class='posts'>
<li><a href='http://bestbloggermenus.blogspot.com/2012/07/css-reset-blogger-tabs.html'>CSS Reset Blogger Tabs</a></li>
<li><a href='http://bestbloggermenus.blogspot.com/2012/07/blogger-horizontal-tab-menu.html'>Blogger Horizontal Tab Menu</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='http://www.blogger.com/rearrange?blogID=8408920854530461440&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget&sectionId=footer-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("BlogArchive1"));' target='configBlogArchive1' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div>
</div></div>
<table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'>
<tbody>
<tr>
<td class='first columns-cell'>
<div class='foot section' id='footer-2-1'><div class='widget Profile' id='Profile1'>
<h2>Mengenai Saya</h2>
<div class='widget-content'>
<a href='http://www.blogger.com/profile/15605262488816486839'><img alt='Foto Saya' class='profile-img' height='80' src='http://3.bp.blogspot.com/-kBp0dho8wXA/UBO6H1JaU9I/AAAAAAAAAAQ/fMENR1dgbtM/s220/gubhugreyot-April-2012.jpg' width='80'/></a>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link' href='http://www.blogger.com/profile/15605262488816486839' rel='author' style='background-image: url(http://www.blogger.com/img/logo-16.png);'>
gubhugreyot
</a>
</dt>
</dl>
<a class='profile-link' href='http://www.blogger.com/profile/15605262488816486839' rel='author'>Lihat profil lengkapku</a>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='http://www.blogger.com/rearrange?blogID=8408920854530461440&widgetType=Profile&widgetId=Profile1&action=editWidget&sectionId=footer-2-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("Profile1"));' target='configProfile1' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div>
</div></div>
</td>
<td class='columns-cell'>
<div class='foot section' id='footer-2-2'></div>
</td>
</tr>
</tbody>
</table>
<!-- outside of the include in order to lock Attribution widget -->
<div class='foot section' id='footer-3'><div class='widget Attribution' id='Attribution1'>
<div class='widget-content' style='text-align: center;'>
Diberdayakan oleh <a href='http://www.blogger.com' target='_blank'>Blogger</a>.
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='http://www.blogger.com/rearrange?blogID=8408920854530461440&widgetType=Attribution&widgetId=Attribution1&action=editWidget&sectionId=footer-3' onclick='return _WidgetManager._PopupConfig(document.getElementById("Attribution1"));' target='configAttribution1' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>
</div></div>
</div>
</div>
<div class='footer-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</footer>
<!-- content -->
</div>
</div>
<div class='content-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</div>
</body>
</html>

</textarea>
</form>
&lt;/body&gt;<br />
&lt;/html&gt;
</td>
<td valign="top" class="yourprev">
<iframe class="GRpreview" src="about:blank" name="preview" frameborder="0" style="display:block;margin:0 auto;"></iframe>
</td>
</tr>
</table>


</body>
</html>




